<template>
  <div class="file-icon">
    <i :class="iconClass"></i>
  </div>
</template>

<script>
export default {
  name: 'FileIcon',
  props: {
    fileType: {
      type: String,
      default: ''
    }
  },
  computed: {
    iconClass() {
      const type = this.fileType.toLowerCase();
      switch(type) {
        case 'pdf':
          return 'el-icon-document';
        case 'doc':
        case 'docx':
          return 'el-icon-document-copy';
        case 'ppt':
        case 'pptx':
          return 'el-icon-document-checked';
        case 'jpg':
        case 'jpeg':
        case 'png':
          return 'el-icon-picture';
        default:
          return 'el-icon-document';
      }
    }
  }
}
</script>

<style scoped>
.file-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

.file-icon i {
  font-size: 30px;
  color: #409EFF;
}
</style> 